<!-- 储物室管理 -->
<template>
  <div class="RegionalManagement">
    <!-- 页面头部和查询区域 -->
    <div class="RegionalManagement-tittle">
      <div class="crumbs">
        <p><span>资料管理 /</span> <span> 储物室管理</span></p>
        <h3>储物室管理</h3>
      </div>
      <div class="search">
        <div class="search-left">
           <el-form-item label="储物室号">
            <el-input clearable v-model="storageRoom" placeholder="请输入" />
          </el-form-item>
        </div>
        <div class="search-right">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" plain @click="reset">重置</el-button>
        </div>
      </div>
    </div>
    <!-- 新建按钮 -->
    <div class="RegionalManagement-content">
      <div class="content-title">
        <span>储物室列表</span>
        <div class="title-btn">
          <el-button type="primary"  @click="go">+ 新建</el-button>
          <el-button type="primary" plain @click="batchDel">批量删除</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :cell-style="cellStyle"
        :header-row-style="headerStyle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column prop="buildingName" label="楼座" align="center" />
        <el-table-column prop="unitName" label="单元" align="center" />
        <el-table-column prop="storageRoom" label="储物室号" align="center" >
        </el-table-column>
        <el-table-column prop="builtArea" label="建筑面积" align="center" />
        <el-table-column prop="sharedArea" label="公摊面积" align="center" />
        <el-table-column prop="usableArea" label="实用面积" align="center" />
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button type="primary" text @click="handleEdit()"
              >编辑</el-button
            >
            <el-button type="primary" text @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="demo-pagination-block">
        <Page
          :total="total"
          :count="count"
          :currentPage="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></Page>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Page from "../../components/Page.vue";
import http from "../../utils/http";
import { ElMessage } from "element-plus";
import router from "../../router";

const options = [
  {
    value: "住宅",
    label: "住宅",
  },
  {
    value: "商业用地",
    label: "商业用地",
  },
  {
    value: "商住都可",
    label: "商住都可",
  },
];

const cellStyle = ref({
  height: "60px",
  fontSize: "15px",
});
const headerStyle = ref({
  height: "60px",
  fontSize: "15px",
  color: "black",
});
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  console.log(val)
  multipleSelection.value=[]
  val.forEach(v => {
    multipleSelection.value.push(v.id)
  });
  console.log(multipleSelection.value)
}
let tableData = ref([]);
let houseUse = ref();
let storageRoom=ref();
let total = ref(0);
let page = ref(1);
let count = ref(5);
let handleEdit = () => {};
let handleCurrentChange = (val) => {
  console.log(val)
  page.value = val;
  getData();
};
let handleSizeChange = (val) => {
  console.log(val)
  count.value = val;
  getData();
};
// 渲染函数
let getData = () => {
  http({
    url: "/storageRoomManagement/list",
    params: {
      page: page.value,
      limit: count.value,
      storageRoom:storageRoom.value,
    },
  }).then(({data}) => {
    console.log(data);
    if (data.code == 0) {
      tableData.value=data.data.list;
      total.value = data.data.totalCount;
    }
  });
};
//搜索
let search = () => {
  getData();
};
//重置
let reset = () => {
  storageRoom.value = "";
  page.value=1;
  getData();
};
//删除
let del = (index) => {
  console.log(index);
  http({
    url: "/storageRoomManagement/delete",
    method: "DELETE",
    params:{ids:index}
  }).then(({ data }) => {
    // console.log(data)
    if (data.code == 0) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getData();
    } else {
      ElMessage.error("删除失败");
    }
  });
};
//批量删除
let batchDel=()=>{
  http({
    url: "/storageRoomManagement/delete",
    method: "DELETE",
    data:multipleSelection.value
  }).then(({ data }) => {
    console.log(data)
    if (data.code == 0) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getData();
    } else {
      ElMessage.error("删除失败");
    }
  });
};
//新建
let go=()=>{
  router.push("/home/newGallery");
}

//初始化渲染
onMounted(() => {
  console.log("挂载后");
  getData()
});
</script>

<style lang="less" scoped>
.RegionalManagement {
  width: 90%;
  // height: 100%;
  margin: auto;
  .RegionalManagement-tittle {
    margin-top: 20px;
    background-color: white;
    .crumbs {
      padding: 15px 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      p {
        margin-bottom: 10px;
        span:nth-child(1) {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
    .search {
      width: 93%;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .search-left {
        display: flex;
        span {
          font-size: 16px;
        }
        .el-input {
          margin-left: 15px;
          width: 250px;
        }
      }
    }
  }
  .RegionalManagement-content {
    padding: 15px 20px;
    margin-top: 20px;
    background-color: white;

    .content-title {
      width: 96%;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .el-pagination {
    margin-top: 20px;
    // padding-right: 10px;
    justify-content: flex-end;
  }
}
</style>
